<template>
  <div id="background"></div>
  <router-view />
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import CanvasNest from 'canvas-nest.js';

let canvasNestInstance = null;

onMounted(() => {
  const bg = document.getElementById('background');
  canvasNestInstance = new CanvasNest(bg, {
    color: '0,0,255',
    count: 99,
  });

  const canvas = bg.querySelector('canvas');
  if (canvas) {
    canvas.style.pointerEvents = 'none';
  }
});

onBeforeUnmount(() => {
  if (canvasNestInstance) {
    canvasNestInstance.destroy();
  }
});
</script>

<style>
#background {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
}
</style>
